<template>
  <div id="x6-test-container"></div>
</template>

<script>
import { Graph } from '@antv/x6'

export default {
  name: 'x6Test',
  data() {
    return {
      graph: null,
      x6Data: {
        nodes: [
          {
            id: 'node1',
            shape: 'rect',
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: 'hello',
            attrs: {
              // body 是选择器名称，选中的是 rect 元素
              body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
              },
            },
          },
          {
            id: 'node2',
            shape: 'rect',
            x: 160,
            y: 180,
            width: 100,
            height: 40,
            label: 'world',
            attrs: {
              body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
              },
            },
          },
          {
            id: 'node3',
            shape: 'rect',
            x: -100,
            y: 100,
            width: 100,
            height: 40,
            label: '不可拖拽',
            attrs: {
              body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
              },
            },
            data: {
              disableMove: false, //true为可拖拽，false不可拖拽
            },
          },
        ],
        edges: [
          {
            shape: 'edge',
            source: 'node1',
            target: 'node2',
            label: 'x6',
            attrs: {
              // line 是选择器名称，选中的边的 path 元素
              line: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
              },
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.initX6()
  },
  methods: {
    initX6() {
      this.graph = new Graph({
        container: document.getElementById('x6-test-container'),
        width: '100%',
        height: 200,
        background: {
          color: '#F2F7FA',
        },
        interacting: function (cellView) {
          if (
            cellView.cell.getData() != undefined &&
            !cellView.cell.getData().disableMove
          ) {
            return { nodeMovable: false }
          }
          return true
        },
      })

      this.graph.fromJSON(this.x6Data) // 渲染元素
      this.graph.centerContent() // 居中显示
    },
  },
}
</script>

<style scoped></style>
